<template>
  <Card v-bind="$attrs">
    <template #title>
      <Icon icon="simple-line-icons:bubbles" class="m-1 pr-1" />
      <span>通知消息</span>
    </template>
    <template #extra>
      <a-button type="link" size="small" @click="jump" style="z-index: 999">查看更多 ></a-button>
    </template>
    <div style="max-height:500px; overflow-y: auto;">
    <List item-layout="horizontal" :data-source="messageItems">
      <template #renderItem="{ item }">
        <div style="cursor: pointer">
          <a-tooltip placement="right">
            <template #title>
              <div v-html="item.msgContentEntity.content"></div>
            </template>
            <ListItem>
              <ListItemMeta @click="onNoticeClick(item)">
                <template #description>
                  <div style="text-align: right;padding-right: 10px;">
                    {{ item.sendDate }}
                  </div>
                </template>
                <template #title>
                  <div
                    style="
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    <span v-html="item.msgContentEntity.content"> </span>
                  </div>
                </template>
                <template #avatar>
                  <div
                    style="
                      display: inline-block;
                      padding: 5px 10px;
                      font-weight: bold;
                      color: #ee7b00;
                      width: 120px; /* 设置固定的宽度 */
                      white-space: pre-line; /* 保留空格和换行符，允许文本换行 */
                      overflow-wrap: break-word; /* 允许在单词内换行 */
                    "
                  >
                    {{ item.msgContentEntity.title }}
                  </div>
                </template>
              </ListItemMeta>
            </ListItem>
          </a-tooltip>
        </div>
      </template>
    </List>
   </div>
  </Card>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Card, List, Tooltip } from 'ant-design-vue';
  // import { messageItems } from './data';
  import { msgListData } from '/@/api/msg/msg';
  import { Icon } from '/@/components/Icon';
  import { router } from '/@/router';
  import { useGo } from '/@/hooks/web/usePage';
  const go = useGo();

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;
  let messageItems = ref<any>([]);

  function jump() {
    router.push({
      // path: '/process/delay/pmDelay/list',
      path: '/msg/list',
      // query: {
      // },
    });
  }

  function onNoticeClick(record) {
    go('/msg/view?id=' + record.id);
  }
  onMounted(async () => {
    let res = await msgListData({ pageNo: 1,pageSize:10,pushed: false });
    messageItems.value = res.list;
    console.log(res, 'res===');
  });
</script>
<style scoped>
  .ant-card {
    height: 100%;
  }
</style>
